<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>  

<%@ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html"%>

<%@ page isELIgnored="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>活动页</title>
		
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<link href="css/public_ac.css" rel="stylesheet" type="text/css" />
		<link href="css/column_ac.css" rel="stylesheet" type="text/css" />
		<link href="css/activity.css" rel="stylesheet" type="text/css" />
		<script src="dwr/interface/ActivityAction.js"></script>
<script src="dwr/interface/CommentAction.js"></script>
<script src="dwr/engine.js"></script> 
<script src="dwr/util.js"></script>
<script type="text/javascript">

	function next(activityId, cur, count) {
	
		var current = cur + 1;
	
		ActivityAction.nextMember(activityId, cur, callback);
		
		var next = document.getElementById("next");
		if((current * 6) < count) {
			
			
			var str = "<a href=\"javascript:next(" + activityId + ", " + current + "," + count + ")\">下一页</a>";
			next.innerHTML = str;
		} else {
			next.innerHTML = "这是最后一页";
		}
		
		
	}
	
	function callback(data){
		var member, innerStr = "";
		
		for(var i = 0;i < data.length; i++) {
			member = data[i];
			innerStr += createMember(member);
		}
		
		var item = document.getElementById("rv");
		item.innerHTML = innerStr;
	}
	
	function createMember(data) {
		var str = "<a href=\"user.do?userNo=" + data.memberUid + "\">" + data.nickName + "</a><br /><div><img src=\"" + data.mediumImageUrl + "\"/></div>"
		return str;
	}
	
	
	function join(activityId) {
	
		ActivityAction.join(activityId, function(data){
			var item = document.getElementById("join");
			item.href = "javascript:exit(${param.activityId})";
			item.innerText = "退出活动";
		});
	}
	
	function exit(activityId){
		ActivityAction.exit(activityId, function(data){
			var item = document.getElementById("join");
			item.href = "javascript:join(${param.activityId})";
			item.innerText = "加入活动";
		});
	}
	
	
	function add(){
		var content = DWRUtil.getValue("content");
		var receiveUserNo = DWRUtil.getValue("receiveUserNo");
		var title = DWRUtil.getValue("title");
		var comment = {content:content, title:title, receiveUserNo:receiveUserNo, type:3,foreignId:${param.activityId}};
		CommentAction.comment(comment, function(data){
			var item = document.createElement("dl");
			var str = "<a href=\""  + "#" + "\"><img src=\""+"images/img04.gif"+"\" alt=\"img\" /></a><h5><a href=\""+"#"+"\">"+data.sendUserNo+"</a>&nbsp;&nbsp;发表时间:"+data.time.toLocaleString()+"</h5><div><pre>"+data.content+"</pre>";
			item.innerHTML = str;
			var at3 = document.getElementById("at3");
			at3.appendChild(item);
			document.getElementById("content").value = "";
		});
	}
	
	function showAll(item){
				var next = item;
				next.style.display = "none";
				while(next.nextSibling) {
					next = next.nextSibling;
					next.style.display = "block";
				}
			}
			function show(id){
				var item = document.getElementById("ul" + id);
				if(item.lastChild){
					if(item.childNodes.length > 2){
						//var firstItem = item.firstChild;
						//alert(firstItem.style.dispaly)
						//firstItem.style.dispaly = "block";
						//alert(firstItem.style.dispaly)
						var firstItem = item.firstChild;
						firstItem.style.display = "block";
					}
					if(item.childNodes.length > 1){
						var lastItem = item.lastChild;
						
						lastItem.style.display = "block";
						
					}
				}
			}
			
			
	function getComments(foreignId, type, cur){
		CommentAction.getComment(foreignId, type, cur, function(data){
			var string = "<h4>评论</h4>";
			
			var count = data[1];
			var commentList = data[0];
			if(count > 0) {
				for(var i = 0;i < commentList.length; i++) {
					var comment = commentList[i];
					string += createComment(comment);
				}
				document.getElementById("at3").innerHTML = string;
				createNext(cur, count,foreignId);
			} else {
				document.getElementById("at3").innerHTML = "<h4>评论</h4>暂无评论";
			}
				
		});
	}
	
	function createComment(comment){
		var str = "<dl><a href=\"" + comment.sendUserNo + "\"><img src=\"images/img04.gif\" alt=\"img\" /></a>" +
		"<h5><a href=\""+ comment.sendUserNo +"\">" + comment.sendUserName + "</a>&nbsp;&nbsp;发表时间:" + comment.time.toLocaleString() + "</h5>" +
		"<div><pre>" + comment.content + "</pre><ul id=\"ul"+comment.id+"\" class=\"ul\" style=\"list-style: none;margin-left:20px;\">" +
		"<li class=\"check\" onclick=\"showAll(this)\">查看完整对话</li>";
		var reply = comment.commentReply;
		for(var i = 0; i < reply.length; i++) {
			var replyComment = reply[i];
			str += "<li><a href=\"" + replyComment.replyUserNo + "\">" + replyComment.replyUserName + "</a><span style=\"margin-left:30px;\">" + replyComment.time.toLocaleString() + "</span>" +
				"<pre style=\"margin-top:5px;padding-left:10px;\">"+replyComment.content+"</pre></li>";
		}
		
		
		str += "</ul><script defer=\"defer\">show("+ comment.id + ")</" + "script></div></dl>";
		
		return str;
	}
	
	function getNext(cur, foreignId, count){
		getComments(foreignId, 3, cur, count);
	}
	
	function createNext(cur, count, foreignId){
		var number = 0;
		var limit = 10
		if(count % limit == 0) {
			number = count / limit;
		} else {
		
			number = Math.floor(count / limit) + 1;
		}
		
		var alink = "";
		
		if(cur > 0) {
			alink += "<a href=\"javascript:getNext(0," + foreignId + "," + count + ")\">首页</a>...<a href=\"javascript:getNext(" + (cur-1) + "," + foreignId + "," + count + ")\">上一页</a>...";
		}
		alink += (cur + 1) + "/" + number;
		if(cur < number -1) {
			alink += "...<a href=\"javascript:getNext(" + (cur+1) + "," + foreignId + "," + count + ")\">下一页</a>...<a href=\"javascript:getNext(" + (number-1) + "," + foreignId + "," + count + ")\">尾页</a>";
		}
		
		document.getElementById("commentNextTwo").innerHTML = alink;
		
	}
</script>
<style>

#at3 .ul .check{
	cursor: pointer;
}
		
#at3 .ul li{
	display:none;
	border-bottom:1px solid red;
	width:400px;
	padding-top:10px;
}
#at4 dl{
	background:#000;
}
</style>

	</head>
	<body class="body">
		<div class="pageContent">
				
			<jsp:include flush="true" page="../activity/header.jsp"></jsp:include>
			
			<!-- 页面主内容 -->
			<div class="main">
			
				<!-- 页面左侧内容 -->
				<div class="mainLeft">
					
					<!-- 左侧栏目1 -->
					<div class="columnType1">
						<div class="columnType1Title">
							<div class="columnType1TitlePic">
								<img src="theme/skin1/public/columnPic/01.gif"/>
							</div>
							<div class="columnType1TitleText">
								活动分类
							</div>
							<div class="columnType1TitleMore">
								<!-- 这里是更多链接，不需要请删除该链接 -->
								<!-- 
									<a href=""><img src="theme/skin1/public/more1.gif" border="0"/></a>
								 -->
							</div>
						</div>
						<div class="columnType1Content" style="background:#000;">
							<div id="at">
							<ul>
				        	  <c:forEach items="${requestScope.list}" var="data">
				        	  <li><a href="getActivityByType.do?method=big&big=${data.bigtypeId}"><c:out value="${data.bigtypeName}"></c:out></a>
				       	      	<ul>
				       	      	<c:forEach items="${data.activitySmalltypes}" var="small">
				       	      	<li><a href="getActivityByType.do?method=small&small=${small.smalltypeId}"><c:out value="${small.smalltypeName}"></c:out></a></li>
				       	      	</c:forEach>
				                </ul>
				              </li>
				              </c:forEach>
				   	    	</ul>
   	    					</div>
						</div>
					</div>
					
					<!-- 左侧栏目1 -->
					<div class="columnType1">
						<div class="columnType1Title">
							<div class="columnType1TitlePic">
								<img src="theme/skin1/public/columnPic/01.gif"/>
							</div>
							<div class="columnType1TitleText">
								我的活动
							</div>
							<div class="columnType1TitleMore">
								<!-- 这里是更多链接，不需要请删除该链接 -->
								<!-- 
									<a href=""><img src="theme/skin1/public/more1.gif" border="0"/></a>
								 -->
							</div>
						</div>
						<div class="columnType1Content" style="background:#000;">
							<div id="at">
							<ul>
				        	  <li><a href="myActivity.do?method=IPost">我发起的活动</a></li>
				        	  <li><a href="myActivity.do?method=IJoin">我加入的活动</a></li>
				   	    	  <li><a href="activity.do?method=post">发起新活动</a></li>
				   	    	</ul>
   	    					</div>
						</div>
					</div>
				</div>
				
				<!-- 页面中间内容 -->
				<div class="mainContent">
					<c:set var="data" value="${requestScope.activity}"></c:set>
					<!--  中间栏目1 -->
					<div class="columnType2">
						<div class="columnType2Title">
							<div class="columnType2TitlePic">
								<img src="theme/skin1/public/columnPic/04.gif"/>
							</div>
							<div class="columnType2TitleText" style="color:#f90;">
								<c:out value="${data.title}"></c:out> 
							</div>
							<div class="columnType1TitleMore" style="width:400px;color:#f90;">
								发布时间<font color="#ffffff"><fmt:formatDate value="${data.postTime}" pattern="yyyy-MM-dd HH:mm"/></font>
								到期时间<font color="#ffffff"><fmt:formatDate value="${data.deadTime}" pattern="yyyy-MM-dd"/></font>　共有<font color="#ffffff">${requestScope.memberCount}</font>人参加</span>
								<!-- 这里是更多链接，不需要请删除该链接 -->
								<!-- 
									<a href=""><img src="theme/skin1/public/more1.gif" border="0"/></a>
								 -->
							</div>
						</div>
						<div class="columnType2Content" style="background:#000;">
							<div id="at2">
            <strong>发&nbsp;布&nbsp;者&nbsp;&nbsp;：</strong><a href="user.do?uid=${data.postUid}"><c:out value="${data.nickName}"></c:out></a><br />
            <img style="margin-left:65px;" src="${data.mediumImageUrl}"/><br />
            <strong>活动时间：</strong>从&nbsp;<span><fmt:formatDate value="${data.startTime}" pattern="yyyy-MM-dd"/></span>&nbsp;到&nbsp;<span><fmt:formatDate value="${data.endTime}" pattern="yyyy-MM-dd"/></span><br />
              <strong>活动类型:</strong><span>${data.bigTypeName}===${data.smallTypeName}</span><br />
              <strong>活动地址：</strong><span><c:out value="${data.address}"></c:out></span><br />
              <strong>联系方式：</strong><span><c:out value="${data.contact}"></c:out></span><br />
              <strong>活动介绍：</strong><br /><span>
              <c:out value="${data.content}"></c:out></span>
                <br />
              
            <div>
            	<c:if test="${sessionScope.user.userNo eq data.postUid}">
            		<a href="activity.do?method=update&activityId=${data.activityId}">编辑活动</a>
            		<a href="activity.do?method=delete&activityId=${data.activityId}">删除活动</a>
            	</c:if>
              <c:choose>
      			<c:when test="${requestScope.isJoin}">
      				<a id="join" href="javascript:exit(${param.activityId})">退出活动</a>
      			</c:when>
      			<c:otherwise>
      				<a id="join" href="javascript:join(${param.activityId})">加入活动</a>
      			</c:otherwise>
				</c:choose>
            </div></div>
            <div id="at3">
            	
            	<h4>留言</h4>
            	<!-- 
            	<c:forEach items="${requestScope.commentList}" var="data">
            	<dl><a href="#"><img src="images/img04.gif" alt="img" /></a>
           	  <h5><a href="#"><c:out value="${data.sendUserName}"/></a>&nbsp;&nbsp;发表时间:${data.time}</h5>
           	  <div><pre>${data.content}</pre>
           	  								<ul id="ul${data.id}" class="ul" style="list-style: none;margin-left:20px;">
												<li class="check" onclick="showAll(this)">查看完整对话</li>
												<c:forEach items="${data.commentReply}"  var="reply">
												<li>
													<a href="user.do?uid=${reply.replyUserNo}"><c:out value="${reply.replyUserName}"/></a><span style="margin-left:30px;"><fmt:formatDate value="${reply.time}" pattern="yyyy-MM-dd HH:mm"></fmt:formatDate></span>
													<pre style="margin-top:5px;padding-left:10px;">${reply.content}</pre>
													
												</li>
												</c:forEach>
											</ul>
											<script>
												show(${data.id})
											</script>
           	  </div></dl>
           	  
				</c:forEach>
				 -->
            </div>
            <br />
            <div id="commentNextTwo"></div>
            <script>
            		//${requestScope.activity.postUid}
            		getComments(${param.activityId}, 3, 0);
            	</script>
            	<br />
            <div id="at4">
            	<h4>发表评论</h4>
              	<div style="margin-left:5px;">
              		<input id="receiveUserNo" type="hidden" name="receiveUserNo" value="${requestScope.activity.postUid}"/>
					<input id="title" type="hidden" name="title" value="${requestScope.activity.title}"/>
					<textarea style="color:#fff;" name="content" class="fm2" id="content"></textarea>
            	  </div>
            	<div style="margin-left:5px;"><input type="button" value="发表评论" onclick="add()"/></div>
            </div>
						</div>
						<div class="columnType2End">
						</div>
					</div>
					
				</div>
				
				<!-- 页面右侧内容 -->
				<div class="mainRight">
				
					<!-- 右侧栏目1 -->
					<div class="columnType1">
						<div class="columnType1Title">
							<div class="columnType1TitlePic">
								<img src="theme/skin1/public/columnPic/06.gif"/>
							</div>
							<div class="columnType1TitleText">
								加入该活动的会员
							</div>
							<div class="columnType1TitleMore">
								<!-- 这里是更多链接，不需要请删除该链接 -->
								<!-- 
									<a href=""><img src="theme/skin1/public/more1.gif" border="0"/></a>
								 -->
							</div>
						</div>
						<div class="columnType1Content" style="background:#000;">
							<div id="rv" style="_height:1%;">
							<c:forEach items="${requestScope.memberList}" var="data">
          	<a href="user.do?userNo=${data.memberUid}"><c:out value="${data.nickName}"/></a><br />
            <div><a href="#"><img src="${data.mediumImageUrl}" alt="img" /></a></div>
          	</c:forEach>
					          </div>
					          <div id="next"><a href="javascript:next(${param.activityId}, 1, ${requestScope.memberCount})">下一页</a></div>
						</div>
					</div>
					
					
				</div>
			</div>
			
			<jsp:include flush="true" page="../activity/footer.jsp"></jsp:include>
				
		</div>
	</body>
</html>